<template>
    <!-- <div>用户管理</div> -->
    <div>
        <!-- tailwindcss -->
        <div class="h-24 w-full bg-white p-3">
            <div>
                <span class="text-slate-400 pr-1">首页</span>/<span class="pl-1 font-bold">用户管理</span>
            </div>
            <div class="pt-3 text-xl text-black font-bold">用户管理</div>
        </div>

        <div class="content">
            <div class="bg-white pt-4 pr-6 pl-3 m-3">
                <n-form ref="formRef" label-placement="left" inline :label-width="80" :model="formSearch"
                    :rules="rules">
                    <n-form-item label="姓名" path="name">
                        <n-input v-model:value="formSearch.name" placeholder="输入姓名" />
                    </n-form-item>
                    <n-form-item label="邮箱" path="email">
                        <n-input v-model:value="formSearch.email" placeholder="输入邮箱" />
                    </n-form-item>
                    <n-form-item>
                        <n-button attr-type="button" class="ml-auto mr-2"  @click="handleValidateClick">
                        重置
                        </n-button>
                        <n-button type="info" attr-type="button"  class="ml-auto" @click="handleValidateClick">
                            提交
                        </n-button>
                    </n-form-item>
                </n-form>
            </div>
            <div class="mt-4 bg-white">
                <div class="text-xl px-6 py-4 flex">
                    <span>用户列表</span>
                    <span class="ml-auto">
                        <n-button type="info" @click="">
                            + 新建
                        </n-button>
                    </span>
                </div>
                <div>

                    <n-data-table
                    :columns="columns"
                    :data="data"
                    :pagination="pagination"
                    :bordered="false"
                />
                </div>
                <div class="p-4 flex justify-end pr-10">
                    <n-pagination v-model:page="page" :page-count="totalPages" />
                </div>
               
            </div>

        </div>


    </div>

</template>

<script lang="ts" setup>
import { h, defineComponent,ref,onMounted } from 'vue'
import { NButton, useMessage,NSwitch,NAvatar } from 'naive-ui'
import {users} from "@/api/user"
const formRef = ref(null);
const  page=ref(1);
const rules = ref({
    name: {
        required: true,
        message: '请输入姓名',
        trigger: 'blur'
    },
    email: {
        required: true,
        message: '请输入邮箱',
        trigger: ['input', 'blur']
    }

})
const formSearch = ref({
    name: '',
    email: ''
})

type Song = {
  no: number
  title: string
  length: string
}



const columns = [
    {
      title: '头像',
      key: 'avatar_url',
      render(row){
       return  h(
        NAvatar,
        {
            round:true,
            size:"medium",
            src:row.avatar_url
        }
        )
        }
    },
    {
      title: '姓名',
      key: 'name'
    },
    {
      title: '邮箱',
      key: 'email'
    },
    {
      title: '是否禁用',
      key: 'is_locked',
      render (row) {
        return h(
          NSwitch,
          {
            value:row.is_locked==1?false:true
          }
        )
      }
    },
     {
      title: '创建时间',
      key: 'created_at'
    },
    {
      title: '操作',
      key: 'actions',
      render (row) {
        return h(
          NButton,
          {
            strong: true,
            tertiary: true,
            size: 'small',
            onClick: () => play(row)
          },
          { default: () => 'Play' }
        )
      }
    }
  ]

  let data = ref([]);
    const totalPages = ref(0);
  onMounted(()=>{
    users({}).then((res)=>{
        console.log('users',res);
        data.value = res.data;
        totalPages.value = res.meta.pagination.total_pages,
        page.value=res.meta.pagination.current_page
;
    })
  })

// const data: Song[] = [
//   { no: 3, title: 'Wonderwall', length: '4:18' },
//   { no: 4, title: "Don't Look Back in Anger", length: '4:48' },
//   { no: 12, title: 'Champagne Supernova', length: '7:27' }
// ]
const message = useMessage()

const pagination=ref(false as const);
</script>

<style scoped>

</style>